<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车案例练习</title>
  <link rel="stylesheet" href="./css/style.css">

</head>

<body>
  <header>
    <div class="container">
      <!-- logo -->
      <div class="logo">CHANEL</div>
      <!-- 导航菜单 -->
      <div class="menu">
        <ul>
          <li><a href="">首页</a></li>
          <li><a href="">商城</a></li>
          <li><a href="">购物车</a></li>
          <li><a href="">关于</a></li>
          <li><a href="">会员俱乐部</a></li>
        </ul>
        <!-- 用户信息 -->
        <div class="user">
          <img src="./img/user.png" alt="">
        </div>
      </div>
    </div>
  </header>
  <!-- 面包屑导航 -->
  <div class="breadcrumb">
    <div class="container">
      <ul>
        <li><a href="" class="active"><img src="./img/buycar.png" alt=""><i calss="active">我的购物车</i></a></li>
        <li><a href=""><img src="./img/menu.png" alt=""><i>填写核对订单</i></a></li>
        <li><a href=""><img src="./img/menu.png" alt=""><i>成功提交订单</i></a></li>
      </ul>
    </div>
  </div>
  <!-- 商品列表 -->
  <div class="goods">
    <div class="container">
      <div class="title">全部商品</div>
      <div class="goodslist">
        <!-- 列表项 -->
        <div class="row list-item">
          <ul>
            <li class="allBtn"><input type="checkbox">全选</li>
            <li class="pname">商品名称</li>
            <li class="pads">发货站</li>
            <li class="price">价格</li>
            <li class="pnum">数量</li>
            <li class="amount">金额</li>
            <li class="operate">操作</li>
          </ul>
        </div>
        <!-- 商品列表 -->
        <div class="row list">
          <ul>
            <li class="allBtn"><input type="checkbox"></li>
            <li class="pname">
              <img src="./img/goods1.jpg" alt="">
              <div class="title">CHANEL/香奈儿系列陶瓷-精钢 白色 石英机芯 H1628</div>
            </li>
            <li class="pads">中国大陆</li>
            <li class="price">50.00</li>
            <li class="pnum"><button class="reduce">-</button><span>3</span><button class="plus">+</button></li>
            <li class="amount">59</li>
            <li class="operate">删除</li>
          </ul>
        </div>
        <div class="row list">
          <ul>
            <li class="allBtn check"><input type="checkbox"></li>
            <li class="pname">
              <img src="./img/goods1.jpg" alt="">
              <div class="title">CHANEL/香奈儿系列陶瓷-精钢 白色 石英机芯 H1628</div>
            </li>
            <li class="pads">中国大陆</li>
            <li class="price">50.00</li>
            <li class="pnum"><button class="reduce">-</button><span>2</span><button class="plus">+</button></li>
            <li class="amount">100</li>
            <li class="operate">删除</li>
          </ul>
        </div>
        <div class="row list">
          <ul>
            <li class="allBtn check"><input type="checkbox"></li>
            <li class="pname">
              <img src="./img/goods1.jpg" alt="">
              <div class="title">CHANEL/香奈儿系列陶瓷-精钢 白色 石英机芯 H1628</div>
            </li>
            <li class="pads">中国大陆</li>
            <li class="price">50.00</li>
            <li class="pnum"><button class="reduce">-</button><span>4</span><button class="plus">+</button></li>
            <li class="amount">30</li>
            <li class="operate">删除</li>
          </ul>
        </div>
        
        <!-- 商品总计 -->
        <div class="list-total">
          <div><input class="allBtn" type="checkbox">全选</div>
          <div class="right-info">
            <ul>
              <li class="right-info-num">商品数量总计：<span>0</span>件</li>
              <li class="right-info-bznum">包装数量总计：<span>0</span>件</li>
              <li class="right-info-fl">返&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;利：<span>0</span>元</li>
              <li class="right-info-total">商品金额总计（不含税金和运费）：<span>82567.00</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 猜你喜欢 -->
  <div class="lovely">
    <div class="container">
      <div class="title">猜你喜欢</div>
      <div class="lovely-list">
        <ul>
          <li>
            <a href="">
              <img src="./img/lovely1.png" alt="">
              <div>2017春夏新款双C银金色logo项链</div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./img/lovely1.png" alt="">
              <div>2017春夏新款双C银金色logo项链</div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./img/lovely1.png" alt="">
              <div>2017春夏新款双C银金色logo项链</div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./img/lovely1.png" alt="">
              <div>2017春夏新款双C银金色logo项链</div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 页面底部 -->
  <footer>
    <div class="container">
      <div>
        <a href="">销售店铺</a>
        <a href="">我们将在店铺恭候您的光临</a>
        <a href="">寻找店铺销售</a>
      </div>
      <div>
        <a href="">联系方式</a>
        <a href="">我们尽快给予您答复</a>
        <a href="">联系我们</a>
      </div>
      <div>
        <a href="">保养建议和专业服务</a>
        <a href="">查看我们的专业服务及保养建议</a>
        <a href="">访问专栏</a>
      </div>
    </div>
  </footer>



  <script src="./js/flexible.js"></script>
  <script src="./js/buycar.js"></script>
</body>

</html>